<template style="overflow-y: scroll; overflow-x: hidden; height: 100%">
  <div>
    <el-drawer
      title="登记设备"
      size="61%"
      :visible.sync="visibility"
      custom-class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <el-form
          ref="dataForm"
          :rules="rules"
          :model="temp"
          label-position="right"
          label-width="120px"
        >
          <el-form-item label="设备">
            <el-tooltip effect="dark" content="添加设备" placement="top-start">
              <el-select
                v-model="equipment"
                value-key="equipmentId"
                filterable
                @change="handleEquipmentChang"
              >
                <el-option
                  v-for="item in equipmentDataList"
                  :key="item.equipmentId"
                  :label="
                    '名称：' + item.equipmentName + '' + ', 型号：' + item.model
                  "
                  :value="item"
                />
              </el-select>
            </el-tooltip>
          </el-form-item>
          <el-table :data="equipmentList" highlight-current-row>
            <el-table-column
              label="设备编号"
              width="100px"
              prop="equipmentCode"
            />
            <el-table-column
              label="设备名称"
              min-width="100px"
              prop="equipmentName"
            />
            <el-table-column label="规格" width="100px" prop="specification" />
            <el-table-column
              label="有效期"
              width="160px"
              prop="expirationDate"
            />
            <el-table-column
              v-if="!equipmentStatus"
              label="使用模式"
              width="150px"
            >
              <template slot-scope="scope">
                <el-radio-group
                  v-model="scope.row.usage"
                  :disabled="scope.row.checkFlag"
                  @click.native="pushRadio(scope.row.usage, scope.$index)"
                >
                  <el-radio :label="1">独占</el-radio>
                  <el-radio :label="0">共享</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column width="120">
              <template slot-scope="{ row }">
                <el-button
                  type="text"
                  :disabled="row.checkFlag"
                  @click="handleRemove(row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-form-item style="margin-top: 10px">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleCommit"> 确 定 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getEquipmentList } from '@/api/base/equipment.js'
export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    currentTask: {
      type: Object,
      default: null
    },
    updateEquipmentData: {
      type: Array,
      default: null
    },
    equipmentStatus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      temp: {},
      rules: {
        // receiveUserName: [
        //   { required: true, message: '生产员不可为空', trigger: 'blur' }
        // ]
      },
      list: [],
      equipment: null,
      equipmentDataList: [],
      equipmentList: []
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      if (value) {
        // this.reset()
      }
    },
    updateEquipmentData(data) {
      this.equipmentList = data || []
    }
  },
  mounted() {
    this.getEquipmentDataList()
  },
  methods: {
    getEquipmentDataList() {
      const data = {
        status: 1,
        scope: 1,
        occupyStatus: 0
      }
      getEquipmentList(data).then((res) => {
        const arr = res.data || []
        arr.forEach((e) => {
          e.usage = 0
        })
        this.equipmentDataList = arr
      })
    },
    handleClose() {
      this.visibility = false
    },
    handleCommit() {
      this.visibility = false
      this.$emit('update-data', this.equipmentList)
    },
    handleSelectionChange(val) {
      this.selectionData = val
    },
    handleEquipmentChang(val) {
      const data = Array.from(this.equipmentList) || []
      console.log(val,'8888888888');
      // data.forEach(e=>{
      //   if()
      // })
      data.push(val)
      this.equipment = ''
      this.equipmentList = [...new Set(data)]
      console.log(this.equipmentList, 'this.equipmentList')
    },
    handleRemove(row) {
      this.equipmentList.splice(this.equipmentList.indexOf(row), 1)
    },
    pushRadio(val, index) {
      this.equipmentDataList[index].radio = val
    }
  }
}
</script>

<style lang="scss">
</style>
